<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/css/blog.css">
</head>

<body>
    <div class="main">
        <div class="head">
            <h1>博客列表</h1>
            <div class="add">
                <input type="button" value="新增" onclick="btnAdd()">
            </div>
        </div>
        <table>
            <tr>
                <th>id</th>
                <th>标题</th>
                <th>作者</th>
                <th>发表时间</th>
                <th>描述</th>
                <th>操作</th>
            </tr>
            {% for item in blogs %}
            <tr class="blog-row">
                <td>{{item.id}}</td>
                <td>{{item.title}}</td>
                <td>{{item.author}}</td>
                <td>{{item.publishedAt}}</td>
                <td>{{item.descriptions}}</td>
                <td>
                    <input type="button" value="编辑" onclick="btnEdit('{{item.id}}')">
                    <input type="button" value="删除" onclick="btnDel('{{item.id}}')">
                </td>
            </tr>
            {% endfor %}
        </table>
        <div class="pagination">
            <input type="button" value="上一页" id="prev-page">
            <span id="page-info">1/5</span>
            <input type="button" value="下一页" id="next-page">
        </div>
    </div>
    <script src="./js/blog.js"></script>
    <script>
        //获取表格和分页按钮
        const tablebody = document.querySelector("table");
        const prevBtn = document.querySelector("#prev-page");
        const nextbtn = document.querySelector("#next-page");
        const pageInfo = document.querySelector("#page-info");

        //获取所有博客行
        const blogRows = document.querySelectorAll(".blog-row");
        const itemsPerPage = 20;//每页显示的条数
        let currentPage = 1;//当前页码

        //更新页码信息
        function updatePageInfo() {
            const totalPages = Math.ceil(blogRows.length / itemsPerPage);
            pageInfo.textContent = `${currentPage}/${totalPages}`
        }
        //渲染当前页面的列表
        function renderCurrentPage() {
            //隐藏所有行
            // blogRows.forEach(row => {
            //     row.style.display = "none";
            // });
            for (let i = 0; i < blogRows.length; i++) {
                blogRows[i].style.display='none'
            }


            //计算当前页的起始和结束索引
            const start = (currentPage - 1) * itemsPerPage;
            const end = start + itemsPerPage;

            //显示当前页的行
            for (let i = start; i < end; i++) {
                if (blogRows[i]) {
                    blogRows[i].style.display = "";
                }
            }
            //更新页码信息
            updatePageInfo();

            //更新按钮状态
            prevBtn.disabled = currentPage === 1;
            nextbtn.disabled = currentPage === Math.ceil(blogRows.length / itemsPerPage);

        }

        //上一页按钮点击事件
        prevBtn.addEventListener("click", () => {
            if (currentPage > 1) {
                currentPage--;
                renderCurrentPage();
            }
        });
        //下一页按钮点击事件
        nextbtn.addEventListener("click", () => {
            const totalPages = Math.ceil(blogRows.length / itemsPerPage);
            if (currentPage < totalPages) {
                currentPage++;
                renderCurrentPage();
            }
        });

        //初始化分页
        renderCurrentPage();



    </script>
</body>

</html>